<fieldset>
    <legend>Heading</legend>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</fieldset>


<fieldset>
    <legend>Unorder List</legend>
    <ul>
        <li>List element 1</li>
        <li>List element 2</li>
        <li>List element 3
            <ul>
                <li>List element 3.1</li>
                <li>List element 3.2</li>
                <li>List element 3.3</li>
            </ul>
        </li>
    </ul>
</fieldset>

<fieldset>
    <legend>Order List</legend>
    <ol>
        <li>Order list element</li>
        <li>Order list element</li>
        <li>Order list element
            <ol>
                <li>Order list element</li>
                <li>Order list element</li>
                <li>Order list element</li>
            </ol>
        </li>
    </ol>
</fieldset>

<fieldset>
    <legend>Text</legend>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum
    arcu eget nisl. In hac habitasse platea dictumst. Phasellus ipsum. Praesent
    dapibus cursus sem. Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Vivamus ornare tellus non risus. Ut eu tellus.
    Nullam venenatis mattis pede. Vestibulum malesuada. Nunc pulvinar. Aliquam
    massa. Suspendisse semper lectus eu tellus. Etiam lobortis magna. Aenean
    dapibus, nisi varius interdum iaculis, nisl quam feugiat nisl, a sodales enim
    augue a turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p>Vivamus turpis leo, iaculis egestas, iaculis vel, scelerisque quis, odio.
    Proin elementum, ligula at lobortis ultrices, ante massa imperdiet magna,
    egestas porttitor nulla quam sed nisi. Nulla vehicula. Donec et mauris.
    Aliquam erat volutpat. Curabitur pretium. Nam ipsum ante, elementum vitae,
    elementum vel, mollis eu, mauris. Vivamus tellus dolor, molestie eget, aliquet
    ac, aliquam eget, magna. Donec eget lorem. Phasellus iaculis augue a erat.
    Donec ut magna. Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Integer blandit arcu non tellus. </p>

</fieldset>

<fieldset>
    <legend>Text Elements</legend>
    <p>
        Normal Text<br/>
        <strong>Strong text</strong><br/>
        <em>Italic text</em><br/>
        <strike>Strike text</strike><br/>
        <small>Small text</small><br/>
        <big>Big text</big><br/>
        <a href="http://google.com/#external-link" onclick="return false;">External Link</a><br/>
        <a href="#internal-link" onclick="return false;">Internal Link</a><br/>
        <a href="" onclick="return false;">Visited Link</a><br/>
        <del>Delete</del> and <ins datetime="2008-09-11T15:09:55+00:00">Insert</ins> Element<br/>
        <acronym title="World Wide Web">WWW</acronym> acronym<br/>
        <pre>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum
    arcu eget nisl. In hac habitasse platea dictumst. Phasellus ipsum. Praesent
    dapibus cursus sem. Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Vivamus ornare tellus non risus. Ut eu tellus.
    Nullam venenatis mattis pede. Vestibulum malesuada. Nunc pulvinar. Aliquam
    massa. Suspendisse semper lectus eu tellus. Etiam lobortis magna. Aenean
    dapibus, nisi varius interdum iaculis, nisl quam feugiat nisl, a sodales enim
    augue a turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </pre>
        <blockquote>
        Vivamus turpis leo, iaculis egestas, iaculis vel, scelerisque quis, odio.
    Proin elementum, ligula at lobortis ultrices, ante massa imperdiet magna,
    egestas porttitor nulla quam sed nisi. Nulla vehicula. Donec et mauris.
    Aliquam erat volutpat. Curabitur pretium. Nam ipsum ante, elementum vitae,
    elementum vel, mollis eu, mauris. Vivamus tellus dolor, molestie eget, aliquet
    ac, aliquam eget, magna. Donec eget lorem. Phasellus iaculis augue a erat.
    Donec ut magna. Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Integer blandit arcu non tellus.
        </blockquote>



    </p>
</fieldset>

<fieldset>
    <legend>Images</legend>
    <img  alt="noimage" title="noimage" width="100px" height="100px"/><br/>
    <img src="favicon.ico" alt="favicon image" title="favicon image" width="100px" height="100px"/><br/>
    <a href="#" title="Image is link"><img src="favicon.ico" alt="favicon image" title="favicon image" width="100px" height="100px"/></a><br/>
</fieldset>

<fieldset>
    <legend>Lines</legend>
    <hr/>
</fieldset>

<fieldset>
    <legend>Table</legend>
    <table border="0" cellspacing="1" cellpadding="5">
        <caption>Table caption</caption>
        <thead>
            <tr>
                <th>Id</th>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Row1</th>
                <td>Cell 1.1</td>
                <td>Cell 1.2</td>
                <td>Cell 1.3</td>
            </tr>
            <tr>
                <th>Row2</th>
                <td>Cell 2.1</td>
                <td>Cell 2.2</td>
                <td>Cell 2.3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total</th>
                <td colspan="3">5</td>
            </tr>
        </tfoot>

    </table>
</fieldset>
<fieldset>
    <legend>Form Elements</legend>
    <form onsubmit="return false;">
        <input type="text"     name="text"     value="Text example"/><br/>
        <input type="password" name="password" value="password"/><br/>
        <input type="file"     name="file" /><br/>
        <input type="image"    id="favicon" src="/favicon.ico" /><label for="favicon"> &laquo; Image Input</label><br/>
        <fieldset>
            <legend>Select Box</legend>
            <select multiple size="5">
                <option>Option 1</option>
                <option selected="selected">Option 2</option>
                <option>Option 3</option>
            </select>
            <br/>
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
                <optgroup label="Option group">
                    <option>Sub option 1</option>
                    <option>Sub option 2</option>
                    <option>Sub option 3</option>
                </optgroup>
                <option>Option 3</option>
            </select>
        </fieldset>
        <fieldset>
            <legend>Legend for Radiobuttons</legend>
            <label class="radio"><input type="radio" id="radio1" name="radio" value="1"/> Label for Radio 1</label>
            <label class="radio"><input type="radio" id="radio2" name="radio" value="2" checked="checked"/> Label for Radio 2</label>
            <label class="radio"><input type="radio" id="radio3" name="radio" value="3"/> Label for Radio 3</label>
        </fieldset>
        <fieldset>
            <legend>Legend for Checkboxes</legend>
            <label class="checkbox"><input type="checkbox" id="checkbox1" name="checkbox1" value="1"/> Checkbox 1</label>
            <label class="checkbox"><input type="checkbox" id="checkbox2" name="checkbox2" value="2" checked="checked"/> Checkbox 2</label>
        </fieldset>
        <fieldset>
            <textarea rows="4" cols="32" disabled="disabled">Disabled Text Area</textarea><br/>
            <textarea rows="4" cols="32">Text Area</textarea><br/>
            <input type="button"   name="button"   value="Button" />
            <input type="reset"    name="reset"    value="Reset" />
            <input type="submit"   name="submit"   value="Submit" /><br/>
        </fieldset>
    </form>
</fieldset>